<template>
  <div>
    <!-- 导航栏 -->
    <van-nav-bar title="地址管理" left-arrow @click-left="onClickLeft" />
    <div v-for="item in list" :key="item.id" class="telList">
      <ul>
        <li>
          <span>{{ item.name }}</span> <span>{{ item.tel }}</span>
        </li>
        <li>{{ item.address }}</li>
        <li class="default_map">
          <van-radio name="1">默认地址 </van-radio>
          <p @click="gotoEdit"><img src="@/assets/编辑.svg" alt="" /> 编辑</p>
          <van-icon name="delete-o" @click="del">删除</van-icon>
        </li>
      </ul>
    </div>
    <van-cell @click="del"></van-cell>
    <van-popup v-model="show" position="bottom" :style="{ height: '20%' }"
      ><p class="are_you_sure">确定要删除该收货人信息吗</p>
      <p class="yes" @click="confirm">确定</p>
      <p @click="cancel">取消</p>
    </van-popup>
    <div class="btn">
      <button @click="addConsignee">添加新收货人</button>
    </div>
  </div>
</template>

<script>
export default {
  name: "YiLIngMapMange",

  data() {
    return {
      show: false,
      list: [
        {
          id: "1",
          name: "大梨",
          tel: "180****1849",
          address: "广东省深圳市南山区科兴科学园",
        },
        {
          id: "2",
          name: "大梨",
          tel: "180****1849",
          address: "广东省深圳市南山区科兴科学园",
        },
        {
          id: "3",
          name: "大梨",
          tel: "180****1849",
          address: "广东省深圳市南山区科兴科学园",
        },
        {
          id: "4",
          name: "大梨",
          tel: "180****1849",
          address: "广东省深圳市南山区科兴科学园",
        },
        {
          id: "5",
          name: "大梨",
          tel: "180****1849",
          address: "广东省深圳市南山区科兴科学园",
        },
        {
          id: "6",
          name: "大梨",
          tel: "180****1849",
          address: "广东省深圳市南山区科兴科学园",
        },
        {
          id: "7",
          name: "大梨",
          tel: "180****1849",
          address: "广东省深圳市南山区科兴科学园",
        },
      ],
    };
  },

  mounted() {},

  methods: {
    // 返回上一级
    onClickLeft() {
      this.$router.back(-1);
    },
    // 点击删除
    del() {
      this.show = true;
    },
    // 前往编辑页面
    gotoEdit() {
      this.$router.push("/edits");


    },
    // 添加收货人
    addConsignee() {
      this.$router.push("/adds");
    },
    // 确定删除
    confirm() {},
    // 取消删除
  },
  cancel() {},
};
</script>

<style lang="less" scoped>
.van-nav-bar {
  background-color: #f9f9f9;
  // 标题颜色
  /deep/ .van-nav-bar__title {
    color: #a3998d;
  }
  // 左箭头颜色
  /deep/.van-icon {
    color: #67d0bb;
  }
}
.telList {
  margin-bottom: 20px;
}
ul {
  margin: 6px 0;
  li {
    padding: 8px 15px 8px 15px;
  }
}
li:nth-child(2) {
  color: #a2a4a6;
}
.default_map {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #f4f4f4;
  border-bottom: 1px solid #f4f4f4;
  font-size: 16px;
  color: #a2a4a6;
  img {
    width: 16px;
    height: 15px;
  }
  p {
    padding: 0 0 0 145px;
  }
}
.btn {
  width: 100%;
  position: relative;
  bottom: 0;
  border-top: 1px solid #f4f4f4;
  padding: 8px;
  button {
    width: 210px;
    height: 35px;
    background-color: #1abc9c;
    color: #fff;
    border: 0;
    border-radius: 15px;
    margin: 0 0 0 105px;
  }
}
.van-popup {
  p {
    text-align: center;
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #f5f5f5;
  }
  .are_you_sure {
    background-color: #f2f2f2;
  }
}
.yes {
  color: red;
}
</style>